<template>
  <view class="container">
    <!-- <view class="row">
      <view
        class="item"
        v-for="(item,index) in activeItem"
        :key="index"
        @click="currentIndex=index"
                :class="item.active?'active':null"
      >{{item.name}}</view> -->
    <!-- <swiper class="swiperPage" :autoplay="true" :current="currentIndex" @change="swiperTab">
      <swiper-item>
        <view class="swiper-item">A</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-itemB">B</view>
      </swiper-item>
    </swiper> -->
    <!-- <swiper class="swiper" circular :current="currentIndex" @change="swiperTab" previous-margin="100rpx"
            next-margin="100rpx">
      <swiper-item v-for="(info,num) in [1,2,3,4]" :key="num">
        <view class="swiper-item" :class="currentIndex===num?'active':null">A</view>
      </swiper-item>
    </swiper> -->
	<yh-image-loading class="yh_image" imageSrc="https://case.lclook.com/profile/upload/2021/07/20/9dc32ec6-a392-472f-9432-9e450633c90d.png" loadingIngImg="../../static/default_2.png"></yh-image-loading>
	
  </view>
</template>

<script>
	
		import yhImageLoading from '@/components/yh-ui/yh-image-loading/yh-image-loading.vue'
export default {
  data () {
    return {
      title: 'Hello',
      currentIndex: 0,
      activeItem: [{ name: "精选", active: true }, { name: "关注", active: false }]
    }
  },
  onLoad () {

  },
  methods: {
    swiperTab (e) {
            this.currentIndex = e.detail.current //获取索引
            this.activeItem.forEach((item,index)=>{
                if(index===this.currentIndex){
                    item.active = true
                }else{item.active = false}
            })
    },

  },
  components: {
	  'yh-image-loading' :yhImageLoading
  }
}
</script>
 <style lang="scss">
	 .yh_image{
		 width: 600rpx;
		 height: 800rpx;
	 }
// .container {
//   height: 100vh;
//   width: 100%;
//   background: hotpink;
//   .row {
//     display: flex;
//     align-items: center;
//     height: 56rpx;
//     width: 100%;
//     background: blue;
//         padding-left: 100upx;
//     .item {
//       margin-right: 100upx;
//       color: red;
//             &.active{
//                 border-bottom: 2rpx solid red;
//             }
//     }
//   }
//   .swiperPage {
//     height: 300upx;
//     width: 100%;
//     .swiper-item {
//       height: 100%;
//       background: black;
//     }
//     .swiper-itemB {
//       height: 100%;
//       background: yellow;
//     }
//   }
//     .swiper{
//         margin-top: 20upx;
//         height: 700rpx;
//         width: 100%;
//         .swiper-item{
//             height: 40%;
//             width: 90%;
//             opacity: .4;
//             background: yellow;
//             border-radius: 20rpx;
//             margin: 10rpx 20upx;
//             &.active{
//                 transform: scale(1.1);
//                 transition: all 0.2s ease-in 0s;
//                 opacity: 1;
//                 background: red;
//                 border-radius: 20rpx;
//             }
//         }
//     }
// }
</style>